教程：让应用程序拥有动态布局

在本教程中，您将学习如何创建会随设备屏幕分辨率的变化而作出响应的用户界面。具有动态布局的用户界面无论设备和屏幕分辨率如何，外观看上去都很美观，并且易于使用。

视频显示教程的结果。

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳切入点是：

教程资产

本教程的起点资料是存储在 <KanziWorkspace>/Tutorials/Dynamic layout/Assets 目录中的 Dynamic layout.kzproj Kanzi Studio 工程文件。

<KanziWorkspace>/Tutorials/Dynamic layout/Completed 目录包含本教程已完成的工程。

具有动态布局的用户界面会随设备屏幕方向和分辨率的变化而作出响应。网格布局 (Grid Layout) 节点构成动态布局的基础。要让 Kanzi 应用程序拥有动态布局，必须在网格布局 (Grid Layout) 节点内放置要响应屏幕分辨率变化的所有内容。然后建立网格布局 (Grid Layout) 节点，使其以您想要的方式定位和分配内容。

起点工程包含完成本教程所需的两个 2D 网格布局 (Grid layout 2D) 节点：

Player 节点设置媒体播放器应用程序（白色背景的内容）的位置和大小。节点包含三列：
- 第一列和第三列设为按比例 (Proportional)，值为1，使其相互之间及与整个Player网格布局 (Grid Layout)节点的比例相同。这些列包含当前正在播放的歌曲的已用时间和剩余时间。
- 中间一列设为自动 (Automatic)，使Kanzi 根据该列中节点的大小设置其大小。列包含歌曲信息和播放器控件。
Controls 节点设置歌曲名称、艺术家和专辑名称以及播放器控件的位置。节点各列和各行设为按比例 (Proportional)，值为 1，使其相互之间及与整个 Controls2D 网格布局 (Grid layout 2D) 节点的大小比例相同。

让用户界面拥有动态布局

在本节中，让用户界面布局（Player 和Controls 2D 网格布局 (Grid layout 2D) 节点）随设备屏幕方向和分辨率的变化而作出响应。

在本工程中，RootPage 填充整个设备屏幕。由于RootPage 节点的大小随设备分辨率变化，将其高和宽作为基准设置用户界面中节点的尺寸。

要让用户界面的布局自适应：

在 Kanzi Studio 中打开存储在 <KanziWorkspace>/Tutorials/Dynamic layout/Assets 目录中的工程。
（可选）在预览 (Preview) 中点击以进入分析 (Analyze) 模式，然后右键点击并选择调试对象 (Debug objects) 和网格单元格 (Grid cells)。
通过这种方式，将2D 网格布局 (Grid layout 2D)节点的列和行可视化。
在工程 (Project) 中，选择Player 节点，在属性 (Properties) 中添加绑定 (Bindings) 属性并在绑定参数编辑器 (Binding Argument Editor)中设置：
- 属性 (Property) 为布局高度 (Layout Height)
- 表达式 (Expression) 为
```
CLAMP(400, 1200, {@../Node.ActualHeight} - 300)
```
  点击保存 (Save)。
  Player 2D 网格布局 (Grid layout 2D) 节点设置媒体播放器应用程序（白色背景的内容）的位置和大小。绑定根据RootPage 节点的高度设置节点高度。使用 Clamp() 绑定函数限制Player 节点的高度：
  - 节点比RootPage 节点的高度低 300 像素。
    由于Player 节点的垂直对齐 (Vertical Alignment) 属性设为居中 (Center)，这会在顶部和底部产生 300 像素的边距。
  - 该节点绝不会低于 400 像素，也不会高于 1200 像素。
在工程 (Project) 中选择Player 节点，在属性 (Properties) 中点击+ 添加绑定 (+ Add Binding) 并在绑定参数编辑器 (Binding Argument Editor) 中设置：
- 属性 (Property) 为布局宽度 (Layout Width)
- 表达式 (Expression) 为
```
CLAMP(500, {@../Node.ActualWidth}, {@../Node.ActualWidth} - 300)
```
  点击保存 (Save)。
  绑定根据RootPage 节点的宽度设置Player 2D 网格布局 (Grid layout 2D) 节点宽度。使用 Clamp() 绑定函数限制Player 节点的宽度：
  - 节点比RootPage 节点的宽度窄 300 像素。
    由于Player 节点的水平对齐 (Horizontal Alignment) 属性设为居中 (Center)，这会在左右两侧产生 300 像素的边距。
  - 该节点绝不会窄于 500 像素。
在工程 (Project) 中，选择Controls 节点，在属性 (Properties) 中添加绑定 (Bindings) 属性并在绑定参数编辑器 (Binding Argument Editor)中设置：
- 属性 (Property) 为布局高度 (Layout Height)
- 表达式 (Expression) 为
```
{@../Node.Height}
```
  点击保存 (Save)。
  Controls 2D 网格布局 (Grid layout 2D) 节点设置歌曲名称、艺术家和专辑名称以及播放器控件的位置和大小。绑定将Controls 节点的高度设为与Player 节点的高度相同。
在工程 (Project) 中选择Controls 节点，在属性 (Properties) 中点击+ 添加绑定 (+ Add Binding) 并在绑定参数编辑器 (Binding Argument Editor) 中设置：
- 属性 (Property) 为布局宽度 (Layout Width)
- 表达式 (Expression) 为
```
CLAMP(500, 1300, {@../Node.Width} - 300)
```
  点击保存 (Save)。
  绑定根据Player 节点的宽度设置Controls 2D 网格布局 (Grid layout 2D) 节点宽度。使用 Clamp() 绑定函数限制Controls 节点的宽度：
  - 节点比Player 节点的宽度窄 300 像素。
    由于Controls 节点的水平对齐 (Horizontal Alignment) 属性设为居中 (Center)，这会在左右两侧产生 300 像素的边距。
  - 该节点绝不会窄于 500 像素，也不会宽于 1300 像素。

让用户界面中的内容自适应

在本节中，让Controls2D 网格布局 (Grid layout 2D) 节点的内容随设备屏幕方向和分辨率的变化而作出响应。通过这种方式，用户界面中的控件会随屏幕分辨率的变化而改变。

要让用户界面中的内容自适应：

在工程 (Project) 中，选择Song list 节点，在属性 (Properties) 中添加绑定 (Bindings) 属性并在绑定参数编辑器 (Binding Argument Editor)中设置：
- 属性 (Property) 为布局高度 (Layout Height)
- 表达式 (Expression) 为
```
CLAMP(10, 60, {@../Node.Height} / 20)
```
  点击保存 (Save)。
  Song list 图像 (Image) 节点是播放器控件中最左边的控件。绑定根据 Controls 节点的高度设置 Song list 节点高度。使用 Clamp() 绑定函数限制Song list 节点的高度：
  - 节点高度是Controls 节点高度的五分之一。
  - 该节点绝不会短于 10 像素，也不会高于 60 像素。
对Song list节点的布局宽度 (Layout Width) 属性重复上一步骤，并使用绑定表达式：
```
CLAMP(10, 60, {@../Node.Width} / 20)
```
点击保存 (Save)。
绑定的结果与上一步中的绑定结果相同，但设置了Song list 节点的布局宽度 (Layout Width)。
将您在Song list 节点中创建的绑定应用到Controls 节点中的其他图像 (Image) 节点。
1. 在工程 (Project) 中选择Song list 节点，在属性 (Properties) 中右键点击绑定 (Bindings) 属性并选择复制 (Copy)。
2. 在工程 (Project) 中选择 Back 节点，按下 Shift 键并点击 More 节点。
3. 在工程 (Project) 中右键点击选定节点并选择粘贴属性 (Paste Property)。
  通过这种方式，可以将复制的绑定 (Bindings) 属性及其绑定添加并应用到所有选定节点。
在工程 (Project) 中，选择 Play 节点，在属性 (Properties) 中点击布局高度 (Layout Height) 绑定，在绑定参数编辑器 (Binding Argument Editor) 中将表达式 (Expression) 设为
```
CLAMP(50, 120, {@../../../Node.ActualHeight} / 5)
```
点击保存 (Save)。
绑定根据RootPage 节点的高度设置Play 图像 (Image) 节点高度。使用绑定时，Play 节点的大小变化会与Controls 节点中的其他节点不同。
对Play节点的布局宽度 (Layout Width) 属性重复上一步骤，并使用绑定表达式：
```
CLAMP(50, 120, {@../../../Node.ActualWidth} / 5)
```
点击保存 (Save)。
在 Kanzi Studio 中选择文件 (File) > 导出 (Export) > 导出为适用于 Windows 的 KZB 播放器 (Export as KZB Player for Windows) 并在<ProjectName>/Application Player 目录中打开应用程序的 .exe 文件。
您调整应用程序窗口的大小时，即模拟设备屏幕分辨率的变化。注意用户界面的大小如何根据您在工程中创建的绑定而变化。

接下来该做什么？

在本教程中，您学习了如何创建大小会随设备屏幕分辨率的变化而作出响应的用户界面。本工程包含文本块 (Text Block) 节点，无论设备屏幕分辨率如何变化，其文本保持不变。您可以使用在本教程中学到的方法让文本块 (Text Block) 节点中的文本大小随设备屏幕分辨率的变化而作出响应。

您还可以：

学习如何使用自定义属性控制仪表指针的位置。请参阅教程：创建仪表。
学习如何创建组合仪表指示灯并用属性控制它。请参阅教程：创建组合仪表指示灯。

另请参阅

要详细了解有关网格布局 (Grid Layout) 节点如何工作的信息，请参阅使用网格布局 (Grid Layout) 节点。

要详细了解有关使用绑定的信息，请参阅使用绑定和绑定表达式参考。

打开导航